<template>
  <div class="un-d-table-wrap">
    <UnTable
      v-bind="tableProps"
      :value="tableValue"
      class="un-d-table"
      :edit-config="currEditConfig"
      :header-row-style="headerStyle"
      :header-cell-style="headerCellSty"
      @input="(val) => $emit('input', val)"
    />
    <!-- button -->
    <div v-show="showFooterBtn" class="un-d-table-btn">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        circle
        @click="changeTableSize(1)"
      />
      <el-button
        v-show="rowSize !== 1"
        size="mini"
        icon="el-icon-minus"
        circle
        @click="changeTableSize(-1)"
      />
    </div>
  </div>
</template>

<script>
import isEqual from 'lodash/isEqual';
import defaultsDeep from 'lodash/defaultsDeep';
import cloneDeep from 'lodash/cloneDeep';
import UnTable from '../un-table/index.vue';
import {
  unDTableProps,
  transferOldValue,
  getDefaultEditConfig,
} from './config';

export default {
  name: 'UnDTable',
  components: { UnTable },
  props: unDTableProps,
  data() {
    return {
      tableData: [],
      // tData: this.value.content || this.value.data.content, // 兼容旧数据
      currEditConfig: getDefaultEditConfig(),
    };
  },
  computed: {
    tableProps() {
      // eslint-disable-next-line no-unused-vars
      const { value, editConfig, headerRowStyle, headerCellStyle, ...rest } =
        this.$props;
      return rest;
    },
    // 列数由配置面板空值，存在与 defaultValue 中
    columns() {
      return this.defaultValue?.columns || this.value?.columns || [];
    },
    rowSize() {
      return this.tableData.length; // 兼容旧数据
    },
    colSize() {
      return this.columns.length;
    },
    tableValue() {
      return {
        colSize: this.colSize,
        rowSize: this.rowSize,
        data: this.tableData,
        columns: this.columns,
      };
    },
    headerStyle() {
      return {
        ...this.headerRowStyle,
        background: this.headerBgColor,
      };
    },
    headerCellSty() {
      return {
        ...this.headerCellStyle,
        fontWeight: this.isBold ? 700 : 400,
      };
    },
  },
  watch: {
    'tableValue.data': {
      handler(newVal) {
        if (!isEqual(newVal, this.tableData)) {
          this.tableData = newVal;
          this.changeValue('data', newVal);
        }
      },
      deep: true,
    },
    value: {
      handler(val) {
        // debugger;
        const transferV = transferOldValue(val);
        // 用户能够变化的属性，目前只有 data，列 columns 是提前配置好的，用户不能使用过程中不能变更
        if (!isEqual(transferV.data, this.tableData)) {
          this.tableData = transferV.data;
        }
      },
      deep: true,
      immediate: true,
    },
    editConfig: {
      handler(val) {
        this.currEditConfig = val
          ? defaultsDeep(val, this.currEditConfig)
          : this.currEditConfig;
      },
      deep: true,
    },
  },
  methods: {
    // 改变行
    changeTableSize(flag) {
      if (flag > 0) {
        const colObj = {};
        this.columns.forEach(({ field }) => {
          colObj[field] = '';
        });
        this.tableData.push(colObj);
      } else {
        this.tableData.pop();
      }

      this.changeValue('data', this.tableData);
      this.changeValue('rowSize', this.tableData.length);
      // this.$set(this.value, "rowSize", this.tableValue.data.length);
    },
    changeValue(key, val) {
      this.$emit('input', cloneDeep({ ...this.tableValue, [key]: val }));
    },
  },
};
</script>

<style lang="scss">
$border: 1px solid #bbb;

.un-d-table-wrap {
  line-height: 1.5;
  overflow-x: auto;
  .col--edit.col--actived {
    .vxe-cell {
      padding: 0;
    }
  }
}
.un-d-table-row {
  display: flex;
}

.un-d-table {
  border-right: $border;
  border-bottom: $border;
  border-collapse: separate;
  width: 100%;
}

.un-d-table-content td,
.un-d-table-header th {
  border-left: $border;
  border-top: $border;
  overflow: hidden;
}
.un-d-table-content td {
  padding: 0;
  flex: 1;
  .el-input__inner {
    border-radius: 0;
    border: none;
    padding: 0 10px;
    // border-color: #bbb;
    &:focus {
      border: 1px solid #1890ff;
    }
  }
}

.un-d-table-header {
  th {
    background: rgb(204, 204, 204);
    flex: 1;
    text-align: center;
    border-color: gray;
  }
}

.un-d-table-btn {
  margin-top: 0px;
  // position: absolute;
  // left: 0;
  line-height: 1;
  // bottom: -22px;
  .el-button--mini.is-circle {
    padding: 4px;
  }
  .el-button + .el-button {
    margin: 0 4px;
  }
}
</style>
